<template>
  <div class="login">
    <div class="container">
      <el-row :gutter="20">
        <el-col :xs="{span:24}" :sm="{span:24}" :md="{span:12,offset:6}" :lg="{span:12,offset:6}" :xl="{span:12,offset:6}">
          <el-form :model="loginForm" :rules="loginRule" ref="loginForm">
            <el-form-item style="margin-bottom:40px;">
              <p>{{title}}</p>
            </el-form-item>
            <el-form-item prop="loginName">
              <el-input type="text" v-model="loginForm.loginName" auto-complete="on" placeholder="账户" @focus="showTip" @blur="hiddenTip"></el-input>
              <ul class="login-suggest" v-if="tipshow">
                <!-- <li class="pre-history"><p><span>历史记录</span></p></li> -->
                <li v-for="(item,index) in historylist" :key="index" class="list" @click="historyOk(item)" @mouseover="keyChange" @mouseout="keyChange">
                  <span>{{item}}</span>
                </li>
              </ul>
            </el-form-item>
            <el-form-item prop="password">
              <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item style="margin-top:50px;">
              <el-button @click="login">登录</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import {
    get,
    post,
    common
  } from "../../api/api";
  import {
    Loading
  } from "element-ui";
  import axios from "axios";

  export default {
    name: 'login',
    data() {
      var checkLoginName = (rule, value, callback) => {
        if (!value) {
          callback(new Error("请输入用户名"));
        } else if (value.match(/^1[34578]\d{9}$/g) == null) {
          callback(new Error("必须手机号码!"));
        } else {
          callback();
        }
      };
      var checkPassword = (rule, value, callback) => {
        if (!value) {
          callback(new Error("请输入密码"));
        } else if (value.length < 6 || value.length > 12) {
          callback(new Error("必须6-12个字符!"));
        } else {
          callback();
        }
      };
      var checkRepeatPassword = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请再次输入密码"));
        } else if (value !== this.findUserform.password) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      };
      var checkCaptcha = (rule, value, callback) => {
        if (!value) {
          callback(new Error("请输入验证码"));
        } else {
          callback();
        }
      };
      return {
        title: 'hds no world',
        loginForm: {
          loginName: "",
          password: "",
        },
        loginRule: {
          loginName: [{
            required: true,
            message: "请输入账户",
            triggle: "blur"
          }],
          password: [{
              required: true,
              message: "请输入密码",
              triggle: "blur"
            },
            {
              min: 6,
              max: 30,
              message: "必须6-30个字符",
              triggle: "blur"
            }
          ],
          user_id: [{
            required: true,
            message: "请输入验证码",
            triggle: "blur",
            type: 'number'
          }]
        },
        //历史数据
        historylist: [],
        historyKey: false,
        tipshow: false,
      }
    },
    methods: {
      login() {
        this.$refs['loginForm'].validate(valid => {
          if (valid) {
            this.$router.push({
              path: 'apps',
            });
          } else {
            this.$notify.error({
              title: "错误",
              message: "请输入正确的用户名与密码",
              offset: 100
            });
          }
        })
      },
      //提示框的显示与隐藏
      showTip() {
        if (this.historylist.length != 0) {
          this.tipshow = true;
        }
      },
      hiddenTip() {
        if (this.historyKey == false) {
          this.tipshow = false;
        } else {}
      },
      //使用历史记录
      historyOk(name) {
        this.loginForm.loginName = name;
        this.tipshow = false;
        this.historyKey = !this.historyKey;
      },
      keyChange() {
        this.historyKey = !this.historyKey;
      },
    },
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
  .login {
    height: 100%;
    @media (min-width: 768px) {
      .container {
        width: 750px;
      }
    }
    @media (min-width: 992px) {
      .container {
        width: 970px;
      }
    }
    @media (min-width: 1200px) {
      .container {
        width: 1170px;
      }
    }
    .container {
      margin-right: auto;
      margin-left: auto;
      padding-left: 15px;
      padding-right: 15px;
      padding-top: 90px;
    }
    background: -webkit-linear-gradient(left, #22d686, #24d3d3, #22d686, #24d3d3);
    background: linear-gradient(to right, #22d686, #24d3d3, #22d686, #24d3d3);
    background-size: 600% 100%;
    .el-form {
      padding: 30px 40px 20px 40px;
      background-color: #fff;
      border-radius: 5px;
      -webkit-box-shadow: 0px 0px 49px 14px rgba(188, 190, 194, 0.39);
      -moz-box-shadow: 0px 0px 49px 14px rgba(188, 190, 194, 0.39);
      box-shadow: 0px 0px 49px 14px rgba(188, 190, 194, 0.39);
      p {
        text-align: center;
        font-size: 40px;
      }
      .el-input .el-input__inner {
        border: 0 !important;
        border-bottom: 1px solid #e7e7e7 !important;
      }
      .el-button {
        width: 100%;
      }
    }
  }

</style>
